﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="lib/layui/css/layui.css" rel="stylesheet" />
    <script src="lib/jQuery/dist/jquery.js"></script>
</head>
<body>
    <!--<table class="layui-hide" id="test"></table>-->
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md3">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
            <div class="layui-col-md9">
                <button type="button" id="GetClientData">获取数据</button>
                <button type="button" id="addClientData">增加数据</button>
                <button type="button" id="updateClientData">更新数据</button>
                <button type="button" id="deleteClientData">删除数据</button>
            </div>
            <div class="layui-col-md12">
                <table class="layui-hide" id="demo"></table>
            </div>
        </div>
    </div>
    <script src="lib/layui/layui.js"></script>
    <script type="text/javascript">
        var layer;

        layui.use(['upload', 'table', 'layer'], function () {
            var upload = layui.upload;
            var table = layui.table;
            layer = layui.layer;
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                , method: 'post'
                , multiple: false
                , exts: 'jpg|png|gif|bmp|jpeg|doc|docx|zip|rar|sql'
                , auto: true
                , url: '/api/FileManager' //上传接口
                , done: function (res) {
                    //上传完毕回调
                    if (res.status) {
                        layer.alert('上传成功');
                    }
                    else {
                        layer.alert('上传失败');
                    }
                }
                , error: function () {
                    //请求异常回调
                }
            });

            //第一个实例
            table.render({
                elem: '#demo'
                , height: 315
                , url: '/api/ClientFileInfo' //数据接口
                , page: true //开启分页,
                , loading: true
                , limit: 20
                , method: 'get'
                , request: {
                    pageName: 'pageIndex' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                , where: { BackupType: '' }
                , cols: [[ //表头
                    { field: 'fileId', title: '文件编号', width: 80, sort: true, fixed: 'left' }
                    , { field: 'fileName', title: '文件名称', width: 80 }
                    , { field: 'clientIp', title: '客户端IP', width: 80 }
                    , { field: 'filePath', title: '文件路径', width: 80 }
                    , { field: 'backupTypeString', title: '备份文件类型', width: 177 }
                    , { field: 'remark', title: '备注', width: 80, sort: true }

                ]]
            });
        });
        var data = { FileName: "test", ClientIp: "192.168.1.110", FilePath: "12121", BackupTypeString: "file", Remark: "121" };

        var data1 = { FileName: "test1", ClientIp: "1192.168.1.110", FilePath: "121e121", BackupTypeString: "file", Remark: "备注" };

        $(function () {
            $('#GetClientData').click(function () {
                $.ajax({
                    type: "GET",
                    url: "/api/ClientFileInfo/1",
                    dataType: "json",
                    success: function (response) {
                        layer.alert(response.fileName);
                    }
                });
            });

           
            $('#addClientData').click(function () {
                $.ajax({
                    type: "post",
                    url: "/api/ClientFileInfo",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    dataType: "json",
                    success: function (response) {
                        if (response == true) {
                            layer.alert("增加成功");
                        }
                        else {
                            layer.alert("增加失败");
                        }
                    }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                       // alert(textStatus);
                    },
                    beforeSend: function (XMLHttpRequest) {
                        //alert("ss");
                    }
                });
            });

            $('#updateClientData').click(function () {
                $.ajax({
                    type: "Put",
                    url: "/api/ClientFileInfo/1021",
                    contentType: "application/json",
                    data: JSON.stringify(data1),
                    dataType: "json",
                    success: function (response) {
                        if (response == true) {
                            layer.alert("更新成功");
                        }
                        else {
                            layer.alert("更新失败");
                        }
                    }
                });
            });

            $('#deleteClientData').click(function () {
                $.ajax({
                    type: "Delete",
                    url: "/api/ClientFileInfo/6",
                    dataType: "json",
                    success: function (response) {
                        if (response == true) {
                            layer.alert("删除成功");
                        }
                        else {
                            layer.alert("删除失败");
                        }
                    }, 
                });
            });
        })
    </script>
</body>
</html>